/*
 * @Description: 对话框
 * @Author: kanglin
 * @Date: 2018-08-02 15:42:45
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .lucky-money-dialog{

        // position: fixed;
        // width: 100%;
        // height: 100%;

        /** 动画 */
        .fold-enter-active {
            animation-name: fold-in;
            animation-duration: .2s;
        }
        .fold-leave-active {
            animation-name: fold-out;
            animation-duration: .2s;
        }
        @keyframes fold-in {
            0% {
                transform: translateY(50%);
                opacity: 0;
            }
            100% {
                transform: translateY(-50%);
                opacity: 1;
            }
        }
        @keyframes fold-out {
            0% {
                transform: translateY(-50%);
                opacity: 1;
            }
            100% {
                transform: translateY(50%);
                opacity: 0;
            }
        }

        .mask{
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(10, 10, 10, 0.3);
        }

        .dialog{
            position: absolute;
            width: 558 *@rem-per-px;
            margin-left: -279 *@rem-per-px;
            top: 40%;
            left: 50%;
            transform: translateY(-50%);
            overflow: hidden;
            border-radius: 10px;
        }

        .dialog__header{
            height: 88 *@rem-per-px;
            background: #e75384;
            font-size: 30*@rem-per-px;
            text-align: center;
            line-height: 88*@rem-per-px;
            color: #ffffff;
        }

        .dialog__body{
            padding: 46 *@rem-per-px 24 *@rem-per-px;
            line-height: 1.6;
            color: #666666;
            font-size: 24* @rem-per-px;
            background: #ffffff;
            text-align: center;
        }

        .dialog__footer{
            font-size: 0;
            background: #ffffff;
            margin-top: -2px;
        }

        .dialog__footer__confirm,
        .dialog__footer__cancel{
            font-size: 30 *@rem-per-px;
            display: inline-block;
            width: 50%;
            height: 80*@rem-per-px;
            line-height: 80*@rem-per-px;
            color: #666666;
            text-align: center;
            vertical-align: top;

        }

        .dialog__footer__confirm{
            color: #e75384;
        }


    }

</style>

<template>
	<div class="lucky-money-dialog">
		<div
			v-show="visible"
			class="mask"
			@click="cancel"/>
		<transition name="fold">
			<div
				v-show="visible"
				class="dialog">
				<div class="dialog__header">
					{{ title }}
				</div>

				<div class="dialog__body">
					{{ content }}
				</div>

				<div class="dialog__footer">
					<div
						class="dialog__footer__cancel"
						@click="cancel">
						否
					</div>
					<div
						class="dialog__footer__confirm"
						@click="confirm">
						是
					</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
export default {
	name: 'LuckyMoneyDialog',
	props: {
		visible: {
			type: Boolean,
			required: true,
		},
		title: {
			type: String,
			required: true,
		},
		content: {
			type: String,
			required: true,
		},

	},
	data() {
		return {
		};
	},
	methods: {
		/**
         *  隐藏dialog
         * @return {undefined}
         */
		cancel() {
			this.$emit('update:visible', false);
			this.$emit('cancel');
		},

		/**
         * 提交
         * @return {undefined} {description}
         */
		confirm() {
			this.$emit('update:visible', false);
			this.$emit('confirm');
		},
	},
};
</script>

